<template>      
    <div class="talk">
       <button @click="getLoveTalk">获取一句土味情话</button>
       <ul>
        <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
       </ul>
    </div>
</template>

<script lang="ts"  setup name="LoveTalk">  //脚本标签
   import { reactive } from 'vue';
   import axios from "axios";
   import {nanoid} from 'nanoid'
   
   let talkList = reactive([
    {id:'001',title:'001'},
    {id:'002',title:'002'},
    {id:'003',title:'003'}
   ])

   async function getLoveTalk(){
     let result = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
     let obj = {id:nanoid(),title:result.data.content}
     talkList.unshift(obj)
    }


</script>

<style scoped>
  .talk {
    background-color: orange;
    padding: 10px;
    border-radius:10px;
    box-shadow: 0 0 10px;
  }
  select,button {
    margin: 0 5px;
    height: 25px;
  }
</style>